<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_web字体属性</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            float: left;
            border: 1px solid red;
            margin-left: 20px;
        }
        /*
        多个颜色之间的渐变，默认从上到下渐变
        */
        .div1{
            background-image: linear-gradient(red,yellow,blue);
        }
        /*使用关键词设置线性渐变的方向*/
        .div2{
            background-image: linear-gradient(to top, red,yellow,blue);
        }
        /*使用关键词设置线性渐变的方向*/
        .div3{
            background-image: linear-gradient(to top right ,red,yellow,blue);
        }
        /*使用角度设置线性渐变的方向*/
        .div4{
            background-image: linear-gradient(60deg,red,yellow,blue);
        }
        /*调整开始渐变的位置*/
        .div5{
            background-image: linear-gradient(red 50px,yellow 100px,blue 200px);
        }
        .div6{
            background-image: linear-gradient( to left bottom,red 10px,yellow 100px,blue 200px);
        }
    </style>
</head>
<body>

    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
    <div class="div6">6</div>
</body>
</html>